<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">设备保养</block>
		</cu-custom>

		<scroll-view class="bg-white" scroll-y :style="[{height:'calc(100vh - ' + CustomBar + 'px - 100rpx)'}]">
			<view class=" padding-lr-xl">
				<view class="text-center" style="font-size: 50rpx; padding: 10px 0;">
					维保工作报告
				</view>
				<block>
					<view class="padding-sm flex solid-bottom bg-grey">
						<view class="flex-2">
							<text class="text-bold">1：维保设备信息</text>
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-2">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">客户名称：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.customerName" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-2">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">保养时间：</text>
						</view>
						<!-- <view class="flex-3 ">
							<input v-model="formInfo.inspectionTime" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view> -->
						<view class="flex-6 padding-xs text-grey">
							<uni-datetime-picker class="flex-1" type="datetime" v-model="formInfo.inspectionTime"
								@change="repairTimeChange" />
						</view>
					</view>

					<view class="padding-sm flex solid-bottom">
						<view class="flex-2">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">检验设备：</text>
						</view>
						<view class="flex-3">
							<uni-data-checkbox v-model="formInfo.inspectionDevice" :localdata="range6"
								@change="change"></uni-data-checkbox>
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-2">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">检验标准：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.inspectionStandard" class="text-sm" style="width: 100%;"
								type="text" placeholder="暂未填写" />
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-3">
							<text class="text-bold">工具器存放地点：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.storageRegion" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-2">
							<text class="text-bold">工具器名称：</text>
						</view>
						<view class="flex-3 ">
							<view class="text-grey">
								{{formInfo.toolName}}
							</view>
							<!-- <input v-model="formInfo.toolName" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" /> -->
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-2">
							<text class="text-bold">库位：</text>
						</view>
						<view class="flex-3 ">
							<view class="text-grey">
								{{formInfo.storageLocation}}
							</view>
							<!-- 		<input v-model="formInfo.storageLocation" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" /> -->
						</view>
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-2">
							<text class="text-bold">UTC编码：</text>
						</view>
						<view class="flex-3 ">
							<view class="text-grey">
								{{formInfo.utcCode}}
							</view>
							<!-- 	<input v-model="formInfo.utcCode" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" /> -->
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-2">
							<text class="text-bold">出厂编码：</text>
						</view>
						<view class="flex-3 ">
							<view class="text-grey">
								{{formInfo.serialNumber}}
							</view>
							<!-- <input v-model="formInfo.serialNumber" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" /> -->
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-3">
							<text class="text-bold">工具器型号/参数：</text>
						</view>
						<view class="flex-3 ">
							<view class="text-grey">
								{{formInfo.model}}
							</view>
							<!-- 		<input v-model="formInfo.model" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" /> -->
						</view>
					</view>
					<view class="padding-sm flex align-center ">
						<view class="flex-2">
							<text class="text-bold">工器具物料编码：</text>
						</view>
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-3 ">
							<view class="text-grey">
								{{formInfo.materialCode}}
							</view>
							<!-- <input v-model="formInfo.materialCode" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" /> -->
						</view>
					</view>


					<view class="padding-sm flex solid-bottom bg-grey">
						<view class="flex-2">
							<text class="text-bold">2：维保详情</text>
						</view>
					</view>

					<view class="padding-sm flex">
						<view class="flex-1">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">更换密封件：</text>
						</view>
					</view>
					<view class="flex">
						<view class="flex-3">
							<uni-data-checkbox v-model="formInfo.itemResult01" :localdata="range"
								@change="change"></uni-data-checkbox>
						</view>
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-1">
							<text class="text-bold">说明：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.itemDescribe01" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view>
					</view>

					<view class="padding-sm flex">
						<view class="flex-1">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">检查其他零部件损坏情况：</text>
						</view>
					</view>
					<view class="flex">
						<view class="flex-3">
							<uni-data-checkbox v-model="formInfo.itemResult02" :localdata="range2"
								@change="change"></uni-data-checkbox>
						</view>
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-1">
							<text class="text-bold">说明：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.itemDescribe02" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view>
					</view>
					<view class="padding-sm flex">
						<view class="flex-1">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">检测工器具负载是否达到出厂规定的额定压力：</text>
						</view>
					</view>
					<view class="flex">
						<view class="flex-3">
							<uni-data-checkbox v-model="formInfo.itemResult03" :localdata="range3"
								@change="change"></uni-data-checkbox>
						</view>
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-1">
							<text class="text-bold">说明：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.itemDescribe03" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view>
					</view>
					<view class="padding-sm flex">
						<view class="flex-1">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">负载打压全程工器具动作：</text>
						</view>
					</view>
					<view class="flex">
						<view class="flex-3">
							<uni-data-checkbox v-model="formInfo.itemResult04" :localdata="range4"
								@change="change"></uni-data-checkbox>
						</view>
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-1">
							<text class="text-bold">说明：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.itemDescribe04" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view>
					</view>
					<view class="padding-sm flex">
						<view class="flex-1">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">负载打压过程中是否有漏油现象：</text>
						</view>
					</view>
					<view class="flex">
						<view class="flex-3">
							<uni-data-checkbox v-model="formInfo.itemResult05" :localdata="range5"
								@change="change"></uni-data-checkbox>
						</view>
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-1">
							<text class="text-bold">说明：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.itemDescribe05" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view>
					</view>
					<view class="padding-sm flex">
						<view class="flex-1">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">保压试验/15秒压力的下降量情况<text
									class="text-orange">（超出100PSI视为不合格）</text>：</text>
						</view>
					</view>
					<view class="flex">
						<input v-model="formInfo.itemResult06" class="text-sm" style="width: 100%;" type="number"
							placeholder="表显压力下降值/PSI" />
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-1">
							<text class="text-bold">说明：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.itemDescribe06" class="text-sm" style="width: 100%;" type="text"
								placeholder="暂未填写" />
						</view>
					</view>

					<view class="padding-sm flex solid-bottom bg-grey">
						<view class="flex-2">
							<text class="text-bold">2：维保结果</text>
						</view>
					</view>

					<view class="padding-sm">
						<view class="">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">试验工具器照片：</text>
						</view>
						<view class="margin-top-sm padding-sm">
							<htz-image-upload @imgDelete="imgDelete($event, 'toolImage')" :imgLoading="imgLoading"
								:max="10" v-model="formInfo.showImgs" data-name="ceshiData"
								@chooseSuccess="zidingyiSuccess($event,'toolImage','showImgs'  )">
							</htz-image-upload>
						</view>
					</view>

					<view class="padding-sm flex align-center ">
						<view class="flex-2">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">检验结论：</text>
						</view>
					</view>
					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-3 ">
							<input v-model="formInfo.inspectionConclusion" class="text-sm" style="width: 100%;"
								type="text" placeholder="暂未填写" />
						</view>
					</view>

					<view class="padding-sm flex align-center solid-bottom">
						<view class="flex-3">
							<text class="text-red margin-right-xs">*</text>
							<text class="text-bold">检验员：</text>
						</view>
						<view class="flex-3 ">
							<input v-model="formInfo.inspectionMemberNickName" class="text-sm" style="width: 100%;"
								type="text" placeholder="暂未填写" />
						</view>
					</view>

				</block>

			</view>
		</scroll-view>

		<view class="tpm-bottom-submit flex justify-around align-center" :style="[isNev?{'pointer-events':'none'}:{}]">
			<block class="" v-if="!isReadonly">
				<button class="cu-btn bg-green shadow padding-lr-xl" @tap="submitInfo('0')">保存</button>
				<button class="cu-btn bg-blue shadow padding-lr-xl" @tap="submitInfo('1')">提交</button>
			</block>
			<view class="" v-else>
				<text class="text-orange text-bold">{{btnText}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import helper from '../../common/helper';
	import moment from 'moment'
	import {
		deepClone,
		isEmpty
	} from '../../common/base';
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	export default {
		components: {
			htzImageUpload,
		},
		data() {
			return {
				btnText: '',
				authList: helper.authList,
				requiredList: {
					"customerName": {
						"type": "string",
						"description": "客户名称"
					},
					"inspectionTime": {
						"type": "string",
						"format": "date-time",
						"description": "测试时间"
					},
					"inspectionDevice": {
						"type": "string",
						"description": "检验设备"
					},
					"inspectionStandard": {
						"type": "string",
						"description": "检验标准"
					},
					"itemResult01": {
						"type": "string",
						"description": "更换密封件结果"
					},
					"itemResult02": {
						"type": "string",
						"description": "检查其他零部件结果"
					},
					"itemResult03": {
						"type": "string",
						"description": "检测工器具负载是否达到出厂规定的额定压力"
					},
					"itemResult04": {
						"type": "string",
						"description": "负载打压全程工器具动作"
					},
					"itemResult05": {
						"type": "string",
						"description": "负载打压过程中是否有漏油现象"
					},
					"itemResult06": {
						"type": "string",
						"description": "保压试验/15秒压力的下降量情况"
					},
					"toolImage": {
						"type": "string",
						"description": "试验工具器照片"
					},
					"inspectionConclusion": {
						"type": "string",
						"description": "检验结论"
					},
					"inspectionMemberNickName": {
						"type": "string",
						"description": "检验员姓名"
					},
				},
				imgList: [],
				imgLoading: false,
				value: 0,
				range: [{
					"value": '已完成',
					"text": "已完成"
				}, {
					"value": '未完成',
					"text": "未完成"
				}],
				range2: [{
					"value": '部件均完好',
					"text": "部件均完好"
				}, {
					"value": '部件损坏',
					"text": "部件损坏"
				}],
				range3: [{
					"value": '合格',
					"text": "合格"
				}, {
					"value": '不合格',
					"text": "不合格"
				}],
				range4: [{
					"value": '流畅',
					"text": "流畅"
				}, {
					"value": '卡涩/不回位',
					"text": "卡涩/不回位"
				}],
				range5: [{
					"value": '未见漏油',
					"text": "未见漏油"
				}, {
					"value": '漏油',
					"text": "漏油"
				}],
				range6: [{
					text: '压力机',
					value: '压力机'
				}, {
					text: '扭矩测试台',
					value: '扭矩测试台'
				}, {
					text: '工装模拟负载',
					value: '工装模拟负载'
				}],
				inputModal: false,
				isNev: false,
				modalName: '',
				imgLoading: false,
				repairInfo: {},
				equipmentLedger: {},
				ceshiData: [],
				CustomBar: this.CustomBar,
				tabSelect: 100,
				formInfo: {
					// toolImage: [],
					showImgs: [],
					"customerName": "",
					"inspectionConclusion": "",
					"inspectionDevice": "",
					"inspectionMemberId": 0,
					"inspectionMemberNickName": "",
					"inspectionStandard": "",
					"inspectionTime": "",
					"itemDescribe01": "",
					"itemDescribe02": "",
					"itemDescribe03": "",
					"itemDescribe04": "",
					"itemDescribe06": "",
					"itemResult01": "",
					"itemResult02": "",
					"itemResult03": "",
					"itemResult04": "",
					"itemResult05": "",
					"materialCode": "",
					"model": "",
					"serialNumber": "",
					"status": "",
					"storageLocation": "",
					"storageRegion": "",
					"toolImage": "",
					"toolName": "",
					"utcCode": ""
				},

			};
		},
		onLoad(obj) {
			if (obj.rowKey) {
				const params = {
					id: obj.rowKey
				}
				this.initForm(params)
			}
			if (obj.materialCode && obj.serialNumber && !obj.status) {
				this.handleInfo(obj)
			}
			if (obj.materialCode && obj.serialNumber && obj.status) {
				this.initForm(obj)
			}
		},
		computed: {
			isReadonly() {
				// return this.formInfo.status === '1'
				if (this.formInfo.status === '1') {
					this.btnText = '已完成单据不可编辑!'
					return true
				}
				if (!this.authList.includes('auth:role')) {
					this.btnText = '当前登录人不可编辑!'
					return true
				}
			}
		},
		methods: {
			async initForm(obj) {
				let that = this
				uni.showLoading({
					title: '查询中...'
				})
				const params = deepClone(obj)
				that.$api.postAPI('/tpm/api/maintenance/list', params).then(async res => {
					if (res.code == 0) {
						const obj = deepClone(res.data.rows[0])
						const urls = obj.toolImage
						obj.showImgs = await that.getImgUrl(urls)
						that.formInfo = deepClone(obj)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 3000
						});
					}
					uni.hideLoading()
				})
			},
			// 选择设备进入
			handleInfo(obj) {
				let that = this
				const params = deepClone(obj)
				that.$api.postAPI('/tpm/api/device/getByScan', params).then(res => {
					that.formInfo = res.data
					that.formInfo.inspectionTime = moment().format('YYYY-MM-DD HH:mm:ss')
				})
			},
			change(e) {
				console.log('e:', e);
			},
			selectChange2(res) {
				console.log(res)
				this.formInfo.list = res
			},
			repairTimeChange(e) {
				this.formInfo.inspectionTime = e;
			},


			submitInfo(status) {
				let that = this
				if (!that.checkRequired(status)) return
				const params = deepClone(that.formInfo)
				params.status = status
				const API = params.id ? 'putAPI' : 'postAPI'
				uni.showLoading({
					title: '数据提交中...'
				})
				this.$api[API]('/tpm/api/maintenance', params).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						if (status === '0') {
							uni.navigateBack()
							return
						}
						uni.showModal({
							title: '提交成功',
							content: '是否跳转至打印页?',
							complete: res => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/print-label/index?materialCode=' + params
											.materialCode + '&serialNumber=' + params
											.serialNumber
									})
									return
								}
								uni.navigateBack()
							},

						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 3000
						});
					}
				})

			},
			uploadImages(src) {
				var that = this;
				return new Promise(function(resolve, reject) {
					// const formData = new FormData();
					let option = {
						// publicRead: true,
						serviceName: "TPM",
						bussinessModule: "repair"
					}

					that.$api.uploadImages('/oss/api/ossUploadRecord/upload', src, 'file', option,
						function(res) {
							resolve(res);
						})
				})
			},
			showInputModal() {
				var that = this;
				that.inputModal = true;
			},
			hideInputModal() {
				var that = this;
				that.inputModal = false;

			},
			async getImgUrl(urls) {
				let that = this
				if (isEmpty(urls)) return
				const urlList = urls.split(',')
				const showImgs = []
				for (let i = 0; i < urlList.length; i++) {
					let returnImg = await that.$api.generateSignedUrl({
						idList: [urlList[i]],
						imageSignedUrlFlag: true,
						pageSize: '-1'
					});
					if (returnImg.code == 0) {
						showImgs.push(returnImg.data.rows[0].imageSignedUrl);
					}

				}
				return showImgs
			},
			goBackMenu() {
				var that = this;
				if (that.$helper.msgType == 1) {
					uni.reLaunch({
						url: '../menu/menu',
						success() {
							that.$helper.msgType = 0;
						}
					})
				} else {
					uni.navigateBack();
				}
			},
			async zidingyiSuccess(res, key, copyKey) {
				var that = this;
				that.imgLoading = true;

				let toolImage = that.formInfo[key] ? that.formInfo[key].split(',') : [];
				let showImgs = [];
				for (let i = 0; i < res.length; i++) {
					let returnImg = await that.uploadImages(res[i]);
					if (returnImg.code == 0) {
						toolImage.push(returnImg.data.id);
					}
				}
				for (let i = 0; i < toolImage.length; i++) {
					let returnImg = await that.$api.generateSignedUrl({
						// path: toolImage[i],
						idList: [toolImage[i]],
						imageSignedUrlFlag: true,
						pageSize: '-1'
					});
					if (returnImg.code == 0) {
						showImgs.push(returnImg.data.rows[0].imageSignedUrl);
					}
				}
				that.imgLoading = false;
				that.formInfo[key] = toolImage.join(',');
				that.formInfo[copyKey] = showImgs;
			},
			imgDelete(res, key) {
				var that = this;
				const arr = that.formInfo[key].split(',')
				arr.splice(res.index, 1)
				that.formInfo[key] = arr.join(',')
			},
			checkRequired(status) {
				// 如果状态为 '0'，直接返回 true
				if (status === '0') return true;
				const {
					requiredList,
					formInfo
				} = this;
				// 遍历 requiredList
				for (const key in requiredList) {
					if (isEmpty(formInfo[key])) {
						uni.showToast({
							title: `${requiredList[key].description}为空!`,
							icon: 'none',
							duration: 3000
						});
						return false;
					}
				}
				return true;
			}
			// checkRequired(status) {
			// 	let that = this
			// 	if (status === '0') return true
			// 	for (let key in that.requiredList) {
			// 		if (isEmpty(that.formInfo[key])) {
			// 			uni.showToast({
			// 				title: `${that.requiredList[key].description}为空!`,
			// 				icon: 'none',
			// 				duration: 3000
			// 			})
			// 			return false
			// 		}
			// 	}
			// 	return true
			// },

		}
	}
</script>

<style>
	.tpm-bottom-submit {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		z-index: 100;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>